<template>
  <div>
    <div class="header">数据更新截止时间：{{ currentTime }}</div>
     <!-- <transition name='slide-fade'> -->
    <div v-show="isShowMap" :style="{ height: 'calc(60vh - 60px)', width: '100%'}" ref="charts"></div>
     <!-- </transition> -->
    <div v-show="isShowMapTwo" :style="{ height: 'calc(60vh - 60px)', width: '100%'}" >
      <el-button class="query" @click="buttonClick">
        返回
      </el-button>
      <!-- <img :src="defaultImg" style="width:100%;height:400px;"/> -->
      <section>
        <section id="container"></section>
      </section>
    </div>
  <div>
    
  <div>
      <el-table
      :data="dataList"
      v-loading="dataListLoading"
      style="width: 100%;font-weight:1995 !important;"
      border
      
      :cell-style="TableCellStyle"
      :header-cell-style="tableHeaderColor"

      >
      <el-table-column
      prop="provinceName"
      header-align="center"
      align="center"
      fixed
      label="省份">
      </el-table-column>
      <el-table-column
      prop="earlyWarning"
      header-align="center"
      align="center"
      label="预警个数">
      </el-table-column>
      <el-table-column
      prop="stationCount"
      header-align="center"
      align="center"
      label="站址数量(个)">
      </el-table-column>
      <el-table-column
      prop="stationOnNet"
      header-align="center"
      align="center"
      label="在网站址数量（个）">
      </el-table-column>
      <el-table-column
      prop="stationRent"
      header-align="center"
      align="center"
      label="正常起租站址数量（个）">
      </el-table-column>
      <el-table-column
     
      header-align="center"
      align="center"
      label="拦截非在网站址起租订单数（拦截比率）">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.stationNotNetRentBl<=40,'classcolor2': scope.row.stationNotNetRentBl<=70
        && scope.row.stationNotNetRentBl>40
      ,'classcolor3': scope.row.stationNotNetRentBl>70}" >
          {{scope.row.stationNotNetRent}}({{scope.row.stationNotNetRentBl}}%)
          </span>
          
          </template>
      </el-table-column>
      <el-table-column
      prop="stationRemove"
      header-align="center"
      align="center"
      label="发起拆站站址数量（个）">
      </el-table-column>
      <!-- <el-table-column
      header-align="center"
      align="center"
      label="拦截起租订单绑定发起拆站站址数量（拦截比率）">
      <template slot-scope="scope">
            {{scope.row.stationRentRemove}}({{scope.row.stationRentRemoveBl}}%)
        </template>
      </el-table-column> -->
      <el-table-column
      header-align="center"
      align="center"
      label="订单批量绑定资源不合规数量（拦截比率）">
      <template slot-scope="scope">

        <span :class="{'classcolor1': scope.row.stationNoComplianceBl<=40,'classcolor2': scope.row.stationNoComplianceBl<=70
        && scope.row.stationNoComplianceBl>40
      ,'classcolor3': scope.row.stationNoComplianceBl>70}" >
         {{scope.row.stationNoCompliance}}({{scope.row.stationNoComplianceBl}}%)
          </span>

            
        </template>
      </el-table-column>
      <el-table-column
      prop="towerCount"
      header-align="center"
      align="center"
      label="在网铁塔数量（个）">
      </el-table-column>
      <el-table-column
      prop="roomCount"
      header-align="center"
      align="center"
      label="在网机房数量（个）">
      </el-table-column>
      <el-table-column
      prop="distributeSystemCount"
      header-align="center"
      align="center"
      label="在网室分数量（个）">
      </el-table-column>
      <el-table-column
      prop="optCount"
      header-align="center"
      align="center"
      label="在网光缆数量（个）">
      </el-table-column>
      <!-- <el-table-column
      prop="ismark"
      header-align="center"
      align="center"
      label="资源沉淀固化比率">
      </el-table-column> -->
      <el-table-column
      header-align="center"
      align="center"
      label="沉淀固化资源违规操作拦截数（拦截率）">
      <template slot-scope="scope">

        <span :class="{'classcolor1': scope.row.ismarkBl<=40,'classcolor2': scope.row.ismarkBl<=70
        && scope.row.ismarkBl>40
      ,'classcolor3': scope.row.ismarkBl>70}" >
         {{scope.row.ismark}}({{scope.row.ismarkBl}}%)
          </span>

        </template>
      </el-table-column>
     
      <!--新增11个字段-->
      <el-table-column
      header-align="center"
      align="center"
      label="供应商不合规报账结算数量（拦截比率）">
      
      <el-table-column
      header-align="center"
      align="center"
      label="合同编码在合同系统不存在">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.contractIsnullBl<=40,'classcolor2': scope.row.contractIsnullBl<=70
        && scope.row.contractIsnullBl>40
      ,'classcolor3': scope.row.contractIsnullBl>70}" >
         {{scope.row.contractIsnull}}({{scope.row.contractIsnullBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="供应商编码在主数据不存在">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.supplierMdsisnullBl<=40,'classcolor2': scope.row.supplierMdsisnullBl<=70
        && scope.row.supplierMdsisnullBl>40
      ,'classcolor3': scope.row.supplierMdsisnullBl>70}" >
         {{scope.row.supplierMdsisnull}}({{scope.row.supplierMdsisnullBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="供应商编码在主数据系统银行信息为空">
      <template slot-scope="scope">

        <span :class="{'classcolor1': scope.row.supplierBankinfoIsnullBl<=40,'classcolor2': scope.row.supplierBankinfoIsnullBl<=70
        && scope.row.supplierBankinfoIsnullBl>40
      ,'classcolor3': scope.row.supplierBankinfoIsnullBl>70}" >
         {{scope.row.supplierBankinfoIsnull}}({{scope.row.supplierBankinfoIsnullBl}}%)
          </span>

        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="供应商信息在合同系统不存在">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.supplierIsnullBl<=40,'classcolor2': scope.row.supplierIsnullBl<=70
        && scope.row.supplierIsnullBl>40
      ,'classcolor3': scope.row.supplierIsnullBl>70}" >
         {{scope.row.supplierIsnull}}({{scope.row.supplierIsnullBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="合同银行信息为空">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.supplierCmsIsnullBl<=40,'classcolor2': scope.row.supplierCmsIsnullBl<=70
        && scope.row.supplierCmsIsnullBl>40
      ,'classcolor3': scope.row.supplierCmsIsnullBl>70}" >
         {{scope.row.supplierCmsIsnull}}({{scope.row.supplierCmsIsnullBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="合同系统与主数据系统供应商基础信息不一致">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.supplierinfoIsdiffBl<=40,'classcolor2': scope.row.supplierinfoIsdiffBl<=70
        && scope.row.supplierinfoIsdiffBl>40
      ,'classcolor3': scope.row.supplierinfoIsdiffBl>70}" >
         {{scope.row.supplierinfoIsdiff}}({{scope.row.supplierinfoIsdiffBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="合同系统存在多条银行信息">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.cmsBankinfoIsmoreBl<=40,'classcolor2': scope.row.cmsBankinfoIsmoreBl<=70
        && scope.row.cmsBankinfoIsmoreBl>40
      ,'classcolor3': scope.row.cmsBankinfoIsmoreBl>70}" >
         {{scope.row.cmsBankinfoIsmore}}({{scope.row.cmsBankinfoIsmoreBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="合同银行信息与主数据系统不一致">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.cmsmdsBankinfoIsdiffBl<=40,'classcolor2': scope.row.cmsmdsBankinfoIsdiffBl<=70
        && scope.row.cmsmdsBankinfoIsdiffBl>40
      ,'classcolor3': scope.row.cmsmdsBankinfoIsdiffBl>70}" >
         {{scope.row.cmsmdsBankinfoIsdiff}}({{scope.row.cmsmdsBankinfoIsdiffBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="认证系统银行信息为空">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.authbankinfoIsnullBl<=40,'classcolor2': scope.row.authbankinfoIsnullBl<=70
        && scope.row.authbankinfoIsnullBl>40
      ,'classcolor3': scope.row.authbankinfoIsnullBl>70}" >
         {{scope.row.authbankinfoIsnull}}({{scope.row.authbankinfoIsnullBl}}%)
          </span>
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="认证系统存在多条银行信息">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.authbankinfoIsmoreBl<=40,'classcolor2': scope.row.authbankinfoIsmoreBl<=70
        && scope.row.authbankinfoIsmoreBl>40
      ,'classcolor3': scope.row.authbankinfoIsmoreBl>70}" >
         {{scope.row.authbankinfoIsmore}}({{scope.row.authbankinfoIsmoreBl}}%)
          </span>
          
        </template>
      </el-table-column>

      <el-table-column
      header-align="center"
      align="center"
      label="合同的银行信息与认证供应商银行信息不一致">
      <template slot-scope="scope">
        <span :class="{'classcolor1': scope.row.cmsauthBankinfoIsdiffBl<=40,'classcolor2': scope.row.cmsauthBankinfoIsdiffBl<=70
        && scope.row.cmsauthBankinfoIsdiffBl>40
      ,'classcolor3': scope.row.cmsauthBankinfoIsdiffBl>70}" >
         {{scope.row.cmsauthBankinfoIsdiff}}({{scope.row.cmsauthBankinfoIsdiffBl}}%)
          </span>
        </template>
      </el-table-column>
 </el-table-column>

      </el-table>


  </div>
  </div>
  </div>
</template>
<script>

import * as Three from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

import deImg  from '@/assets/img/one.png'
const echarts = require('echarts/lib/echarts')
const axios = require('axios')
require('echarts/lib/chart/map')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { VisualMapComponent } from 'echarts/components';
echarts.use([VisualMapComponent]);
import shengfen from "@/utils/china.json"; //地图包
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data(){
    return {
      currentTime: '2020-12-01 00:00:00',
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      publicPath: process.env.BASE_URL,
      dataListLoading:false,
      defaultImg:deImg,
      isShowMap:true,
      isShowMapTwo:false,
      showFlag:0,
      chart: null,
      dataList:[],
      airData:[]
    }
  },
  computed: {
    scrollerHeight: function () {
      return document.documentElement.clientHeight - 20 + "px"; //自定义高度
    },
    scrollerWeight: function () {
      return document.documentElement.clientWeight - 550 + "px"; //自定义宽度
    },
  },
  created() {
    this.setCurrentTime()
    this.$nextTick(() => {
      // this.initCharts();
      this.queryData();
      // this.initThree();
      // this.loadGlbModel();
    });
  },
  mounted(){
    // this.init()
    // this.animate()
    window.onresize =  () => {
      this.chart.resize();
    };
  },
  destroyed(){
    this.publicPath = process.env.BASE_URL
  },
  methods: {
    tableClass({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        //奇数行，序号不能被2整除
        return "even-row";
      } else {
        return "";
      }
    },
    TableCellStyle(row,rowIndex) {
      console.log(row);
      if (row.rowIndex % 2 == 1) {
        return "background-color:#FFF;";
      } else {
        return "background-color:#F5F5F5;";
      }
    },
    dateFormat(date) {
        const timeDate = new Date(date.getTime() + (8 * 3600 * 1000))
        const timeDateString = timeDate.toJSON()
        return timeDateString.replace('T', ' ').slice(0, 19)
      },
    setCurrentTime() {
        this.currentTime = this.dateFormat(new Date())
      },
    init() {
      const container = document.getElementById('container')
      this.camera = new Three.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.7, 100)
      this.renderer = new Three.WebGLRenderer({ antialias: true })
 
      this.camera.position.set(20, 20, 40)
 
      this.scene = new Three.Scene()
 
      this.renderer.setClearColor(new Three.Color(0xF7F2F1))
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      this.renderer.shadowMap.enabled = true
 
      container.appendChild(this.renderer.domElement)
 
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.target = new Three.Vector3(0, 0, 0)
 
      this.loadLight()
      this.load3D()
    },
    load3D() {
      const loader = new GLTFLoader()
      const dracoLoader = new DRACOLoader()
      dracoLoader.setDecoderPath('/draco/')
      dracoLoader.preload()
      loader.setDRACOLoader(dracoLoader)
      // loader.load('./static/models/machine.glb', (gltf) => {
      loader.load('../2000004/static/models/machine.glb', (gltf) => {
        this.scene.add(gltf.scene)
        this.renderer.render(this.scene, this.camera)
      }, (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
      }, (error) => {
        console.error(error)
      })
    },
    loadLight() {
      // 点光源
      // const point = new Three.PointLight(0xffffff)
      // point.position.set(4000, 4000, 4000) // 点光源位置
      // this.scene.add(point) // 点光源添加到场景中
      // 环境光
      const ambient = new Three.AmbientLight(0xFFFFFF)
      this.scene.add(ambient)
    },
    animate() {
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)
    },

    async queryData(){
try {
      this.dataListLoading = true;
          const r = await this.$http({
            url: this.$http.adornBizUrl('/mapThree/loadTableData'),
            method: 'post',
            data: {},
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          // console.log(r.data.data.map);
          this.dataList = r.data.data.table
          this.airData = r.data.data.map;

          this.initCharts();
        } catch (e) {
          console.log(e)
        } finally {
          this.dataListLoading = false;
        }
},

    animate() {
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)
    },

    buttonClick(){
      let _this = this
      _this.isShowMap=true
      _this.isShowMapTwo=false
      if(_this.showFlag == 0){
        _this.init();
        _this.animate();
      }
      _this.showFlag = 1;
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      // if (rowIndex === 0) {
      //   return 'background-color: #F5F5F5;color:black;font-size:18px;font-weight:1995 !important;'
      // }
      // if (rowIndex === 1 && columnIndex ===15) {
      //   return 'background-color: #F5F5F5;color:black;font-size:18px;font-weight:1995 !important;'
      // }
      return 'background-color: #F5F5F5;color:black;font-size:18px;font-weight:1995 !important;'
    },
    initCharts() {
      let _this = this
      _this.chart = echarts.init(this.$refs["charts"]);
     
      const option = {
        // 背景颜色
        backgroundColor: "#fff",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          alwaysShowContent: false,
          backgroundColor: "#fff",
//          borderColor: "rgba(0, 0, 0, 0.16);",
        borderColor:"red",
          triggerOn: "mousemove",
          enterable: true, //鼠标是否可进入提示框浮层中
          textStyle: {
            fontSize: "12",
            overflow: "break",
          },
          formatter: function (params) {
            let str = "";
            str = `<div> ` + params.name + `:` + params.value +'%'+ `</div>`;
            return str;
          },
        },
        visualMap: {
          //分段型视觉映射组件
          show: true,
          type: "piecewise",
          left: 50,
          bottom: 50,
          showLabel: true,
          itemWidth: 10,
          itemHeight: 10,
          inverse: true,
          // lt:小于; lte:小于等于; gt:大于; gte:大于等于;
          pieces: [
          {
          gte: 0,
          lte: 40,
          label: "场景事中拦截比率<=40%",
          color: "#F7B7B7",
          },
          {
          gte: 41,
          lte: 70,
          label: "40%<场景事中拦截比率<=70%",
          color: "#EF6F6F",
          },
          {
          gte: 71,
          lte: 100,
          label: "场景事中拦截比率>70%",
          color: "#C53F3F",
          }
          ],
        },
        // 地图配置
        geo: {
          map: "china",
          aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom: 1.6, //视觉比例大小,1.2即为原有大小的1.2倍
          roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
          top: "25%",
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#000",
                fontSize:"8"
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#F3D9D9",//"rgba(0, 0, 0, 0.1)",边框线
              borderWidth: 0.5,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
//               areaColor: "rgba(0, 0, 0, 0.1)",
               areaColor:"#EB4B4B",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            selectedMode: false, //取消地图区域点击事件
            geoIndex: 0, //将数据和第0个geo配置关联在一起
            type: "map",
            map:'china',
            data: _this.airData,
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", shengfen);
      _this.chart.setOption(option);
      _this.chart.on("mouseover",  () => {
        //取消鼠标移入地图区域高亮
        _this.chart.dispatchAction({
          type: "legendUnSelect",
        });
      });
       _this.chart.on("click",  () => {
        //  _this.$router.push({
        //   path: "/biz-pwdII"
        // });
        _this.isShowMap = false;
        _this.isShowMapTwo = true;
       });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.classcolor1{
  color: #22a971;
}
.classcolor2{
  color: #a48624;
}
.classcolor3{
  color: #d34a4a;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.el-tablekxd {
    background: #42b983;
}

.slide-fade-enter-active {transition: all .2s ease;}
  .slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
  .slide-fade-enter, .slide-fade-leave-to{transform: translateX(5px);opacity: 0;}


  #three {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

#container {
    width: 100%;
    height: calc(100vh - 84px);
  }

  .header{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: #eaeaea;
    border-bottom: 1px solid #c7c7c7;
    text-align: center;
  }
  

  .el-table .even-row{
 background-color:red !important; 
 font-size: 100px;
 }

 .el-table__row--even {
  background-color: #f7f7f7;
}


</style>
